<template>
  <div class="up-load">
    <img
      class="Default"
      :src="url ? url : '/logo.webp'"
      alt=""
      @click="createInput"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      url: "http://127.0.0.1:3000/image/avatarDefaultPc.png",
    };
  },
  methods: {
    createInput() {
      let input = document.createElement("input");
      // let input = document.getElementById('file')
      input.setAttribute("type", "file");
      // console.log(input)
      if (window.addEventListener) {
        input.addEventListener("change", this.feilLoad);
      } else {
        input.addEventListener("onchange", this.feilLoad);
      }
      input.click();
    },
    feilLoad($event) {
      console.log($event.target.files);
      let feil = $event.target.files[0];
      let type = feil.type;
      if (type.indexOf("image") == -1) {
        return alert("非图片文件");
      } else {
        const Vthis = this;
        const reader = new FileReader();
        reader.readAsDataURL(feil);
        reader.onload = function () {
          let params = new URLSearchParams()
          params.append('ImageBase',this.result)
          Vthis.url = this.result;
          let url = '/upload'
          Vthis.axios.post(url,params);
        };
      }
    },
  },
};
</script>

<style scoped>
.up-load {
  margin: auto;
  width: 100px;
  height: 100px;
  /* background: pink; */
  /* margin-top: 100px; */
}
.Default {
  width: 100px;
  border-radius: 100%;
}
</style>